@import '~tracim_frontend_lib/src/css/Variable.styl'

.memberlist
  margin-top standardSpacing
  &__header
    font-weight bold
    margin-bottom standardSpacing

  &__wrapper
    position relative
    background-color offWhite
  &__list
    margin 0
    padding 0
    list-style none
    &__item
      display flex
      padding standardSpacing
      align-items center
      &:hover
        background-color lightGrey1
      &__avatar
        margin-inline-end textSpacing
        & > img
          width 30px
          height 30px
      &__info
        margin-inline-end auto
        width calc(100% - 35px) // 30px is the avatar's size + textSpacing
        display flex
        flex-direction row
        align-items baseline
        &__firstColumn
          overflow hidden
          white-space nowrap
          &__name
            font-size standardFontSize
            text-overflow ellipsis
            overflow hidden
          &__username
            color darkGrey1
            font-size metadataFontSize
            overflow hidden
            text-overflow ellipsis
            unicode-bidi plaintext
        &__role
          font-size metadataFontSize
          color darkGrey1
          margin-inline-start textSpacing
      &__delete
        font-size standardFontSize
        color fontColor
        cursor pointer
      &__last
        border none
  &__btnadd
    padding standardSpacing
    height 60px
    display flex
    &__button
      display flex
      align-items center
      border-color grey
      color grey
      &__avatar
        display flex
        justify-content center
        align-items center
        margin-inline-end textSpacing
        border-width 2px
        border-style dashed
        border-radius 50%
        width 30px
        height 30px
        cursor pointer
        &__icon
          font-size standardFontSize
      &__text
        font-size standardFontSize
        cursor pointer

@media (min-width: min-md) and (max-width: max-md)
  .memberlist
    width 100%

@media (min-width: min-sm) and (max-width: max-sm)
  .memberlist
    margin 50px 0
    width 100%

@media (max-width: max-xs)
  .memberlist
    margin 50px 0
    width 100%
    &__wrapper
      height auto
    &__list
      height auto
      overflow-Y visible
